<script setup>
import { ref, onMounted, inject, onUnmounted } from 'vue'

let map, scene
function rotate() {
  let center = map.getCenter()
  let lng = center.lng + 180 + ''
  lng = lng.split('.')[0]
  center.lng += 5
  map.easeTo({
    center: center,
    duration: 1000,
    zoom: 1,
    bearing: 0,
    pitch: 0,
    easing: (n) => n
  })
  map.setFog({
    'high-color': `hsl(0, 0, ${lng / 360})`
  })
}
onMounted(() => {
  ({ map, scene } = inject('mapScene'))
  rotate()
  map.on('moveend', rotate)
})
onUnmounted(() => {
  map.stop()
  map.off('moveend', rotate)
})
</script>

<template>

</template>

<style lang="scss">

</style>
